<template>
	<div class="big_screen">

        <headercomponents></headercomponents>

		<div class="body" id="body">
			<div class="cesium">
				<!--<cesium></cesium>-->
			</div>
		</div>		
        <div>
	        <component :is="currentLeftView"></component>        	
        </div>
				
		<div>
	        <component :is="currentRightView"></component> 			
		</div>
		
		<div class="foot_wave">
			<component :is="footWave"></component> 
		</div>
		
		
		
		<div class="dialog" v-if="dialogVisible">
             <div class="info">
             	<div class="info_close" @click="closeDialog">
             		<img src="/img/bigScreen/017.png" alt="" />
             	</div>
             	<div class="info_header">
             		<div>醋酐储罐</div>
             		<div>获取时间：2021-4-10 14时19分</div>
             	</div>
             	<div class="info_body">
	                <div class="section">
	                	<div class="item" v-for="item in data1" :key="index">
	                		<div class="item_top">{{item.label}}</div>
	                		<div class="item_bottom">{{item.test}}</div>
	                	</div>
	                </div>
	                <div class="section">
	                	<div class="item" v-for="item in data2" :key="index">
	                		<div class="item_top">{{item.label}}</div>
	                		<div class="item_bottom">{{item.test}}</div>
	                	</div>
	                </div>             		
             	</div>
             	<div class="info_foot" @click="showFoot">
             		<div>
             			<span style="margin-right: 20px;">
             				<i class="el-icon-picture-outline"></i>
             			</span>
             			<span>历史波动图</span>
             		</div>
             	</div>
             </div>			
		</div>
		
	</div>
</template>
<script>
	import bus from '@/util/bus'
	import cesium from './cesium'
	import headercomponents from './components/header.vue'
	import MHIL from './components/MHIL.vue'
	import MHIR from './components/MHIR.vue'
	import footWave from './components/footWave.vue'
	export default {
		components: {
			cesium,headercomponents,MHIL,MHIR,footWave
		},
		data() {
			return {
				currentLeftView:'MHIL',
				currentRightView:'MHIR',
				footWave:'footWave',
				showRight:true,
				dialogVisible:false,
				data1:[{
					"label":'存储介质',
					"test":'文本'					
				},{
					"label":'形态',
					"test":'文本'					
				},{
					"label":'规格',
					"test":'文本'					
				},{
					"label":'储罐形式',
					"test":'文本'					
				}],
				data2:[{
					"label":'应急处理',
					"test":'文本'					
				},{
					"label":'CAS号',
					"test":'文本'					
				},{
					"label":'化学品类',
					"test":'文本'					
				},{
					"label":'设计容积',
					"test":'文本'					
				}]				
			}
		},
		created() {

		},
		beforeDestroy() {
			
		},
		mounted() {
			bus.$on('showDialog', (e) => {
			    this.dialogVisible=true
			    // 赋值数据
			})					
		},
		methods: {
			closeDialog(){
				this.dialogVisible=false
			},
            showFoot(){
           	 bus.$emit('showFoot');           	 
            }
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}
	
	.big_screen {
		height: 100%;
		position: relative;
	}
	
	.body {
		height: 100%;
	}

	.cesium {
		height: 100%;
		width: 100%;
		/*background: url('/img/bigScreen/004.jpg')no-repeat;*/
		/*background: #fff;*/
		background-size: cover;
		color: transparent;
	}	
	.dialog{position: absolute;width: 450px;z-index: 2000;top: 15%;right: 0;left: 0;margin: 0 auto;}
	.info{
		padding: 20px;
		border:2px solid rgba(51, 102, 204, 0.8);
		border-radius: 2px;
		background: rgba(2,9,51,0.8);	
		color: #fff;
		position: relative;
		.info_header{display: flex;justify-content: space-between;padding-right: 20px;}
		.info_body{margin-top:15px;display: flex;flex-direction: column;height: 150px;		
			   .section{flex: 1;display: flex;margin-bottom: 4px;
			     .item{flex: 1;margin-right: 4px;display: flex;flex-direction: column;
			       .item_top{flex: 1;margin-bottom: 4px;
                       background: linear-gradient(90deg, rgba(45, 103, 146, 0.7) 0%, rgba(45, 103, 146, 0.21) 100%);
			           font-size: 14px;color: #E8EFF6;display: flex;align-items: center;justify-content: center;}
			       .item_bottom{flex: 1;background: linear-gradient(90deg, rgba(45, 103, 146, 0.7) 0%, rgba(45, 103, 146, 0.21) 100%);
			           font-size: 14px;color: #E8EFF6;display: flex;align-items: center;justify-content: center;}
			     }	
			     .item:nth-last-child(1){margin-right: 0;}		    
			   }
			   .section:nth-last-child(1){margin-bottom: 0;}		
		}
		.info_foot{margin-top: 15px;padding: 10px;text-align: center;color: #00FFFF;
		background: linear-gradient(90deg, #2D6792 0%, rgba(45, 103, 146, 0.3) 100%);}
		.info_close{position: absolute;height: 30px;width: 30px;right: 0;top: 0;}
	}
</style>